Angular-এ ডিরেক্টিভ এবং পাইপ টেস্টিং গুরুত্বপূর্ণ, কারণ এগুলি অ্যাপ্লিকেশনের UI এবং ডেটা প্রদর্শন সংক্রান্ত কার্যকলাপ পরিচালনা করে। Angular Testing Framework (যেমন, Jasmine এবং Karma) ব্যবহার করে আপনি আপনার ডিরেক্টিভ এবং পাইপগুলোর সঠিকতা যাচাই করতে পারেন। ডিরেক্টিভ টেস্টিং মূলত তাদের কার্যকারিতা, DOM ম্যানিপুলেশন এবং ইউজার ইন্টারফেসের সাথে সম্পর্কিত হয়, এবং পাইপ টেস্টিং তাদের ডেটা ট্রান্সফরমেশন ফিচারগুলো যাচাই করতে সহায়ক।

ডিরেক্টিভ টেস্টিং

ডিরেক্টিভ একটি Angular ক্লাস যা DOM এলিমেন্টের আচরণ পরিবর্তন করতে ব্যবহৃত হয়। Angular Testing-এ, আপনি ডিরেক্টিভগুলোর কার্যকারিতা পরীক্ষা করতে পারেন যেমন কোন DOM পরিবর্তন ঘটছে কি না এবং সংশ্লিষ্ট UI রিফ্লেক্ট হচ্ছে কি না।

ডিরেক্টিভ টেস্টিং উদাহরণ

ধরা যাক, একটি সিম্পল HighlightDirective রয়েছে যা এলিমেন্টে হাইলাইট পরিবর্তন করে।

HighlightDirective (ডিরেক্টিভ):

import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.renderer.removeStyle(this.el.nativeElement, 'backgroundColor');
  }
}

এই ডিরেক্টিভ mouseenter ইভেন্টে এলিমেন্টের ব্যাকগ্রাউন্ড রং হলুদ করে এবং mouseleave ইভেন্টে রংটা মুছে ফেলে।

HighlightDirective Test (টেস্ট):

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { HighlightDirective } from './highlight.directive';
import { ElementRef, Renderer2 } from '@angular/core';
import { Component } from '@angular/core';

@Component({
  template: `<div appHighlight>Test Div</div>`
})
class TestComponent {}

describe('HighlightDirective', () => {
  let fixture: ComponentFixture<TestComponent>;
  let divElement: HTMLElement;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [HighlightDirective, TestComponent]
    });
    fixture = TestBed.createComponent(TestComponent);
    fixture.detectChanges();
    divElement = fixture.nativeElement.querySelector('div');
  });

  it('should highlight the element on mouse enter', () => {
    const event = new MouseEvent('mouseenter');
    divElement.dispatchEvent(event);
    fixture.detectChanges();
    expect(divElement.style.backgroundColor).toBe('yellow');
  });

  it('should remove highlight on mouse leave', () => {
    const event = new MouseEvent('mouseleave');
    divElement.dispatchEvent(event);
    fixture.detectChanges();
    expect(divElement.style.backgroundColor).toBe('');
  });
});

এই টেস্টে:

• TestComponent একটি সিম্পল কম্পোনেন্ট যা appHighlight ডিরেক্টিভ ব্যবহার করে।
• mouseenter এবং mouseleave ইভেন্ট ট্রিগার করে পরীক্ষিত হয়, এবং DOM এর স্টাইল পরীক্ষা করা হয়।

পাইপ টেস্টিং

Angular পাইপ ডেটার ফরম্যাটিং, ট্রান্সফরমেশন এবং প্রেজেন্টেশন জন্য ব্যবহৃত হয়। যেমন, DatePipe বা CurrencyPipe ডেটাকে একটি নির্দিষ্ট ফরম্যাটে কনভার্ট করতে ব্যবহার হয়। পাইপের টেস্টিং মূলত তাদের আউটপুট সঠিক কিনা এবং বিভিন্ন ইনপুট ভ্যালুতে কিভাবে আচরণ করে তা যাচাই করতে হয়।

পাইপ টেস্টিং উদাহরণ

ধরা যাক, একটি কাস্টম পাইপ তৈরি করা হয়েছে যেটি একটি স্ট্রিং এর প্রথম অক্ষর বড় (capitalize) করে।

CapitalizePipe (পাইপ):

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'capitalize'
})
export class CapitalizePipe implements PipeTransform {

  transform(value: string): string {
    if (!value) return value;
    return value.charAt(0).toUpperCase() + value.slice(1);
  }
}

এই পাইপ স্ট্রিংয়ের প্রথম অক্ষর বড় করে।

CapitalizePipe Test (টেস্ট):

import { CapitalizePipe } from './capitalize.pipe';

describe('CapitalizePipe', () => {
  let pipe: CapitalizePipe;

  beforeEach(() => {
    pipe = new CapitalizePipe();
  });

  it('create an instance', () => {
    expect(pipe).toBeTruthy();
  });

  it('should capitalize the first letter of a string', () => {
    expect(pipe.transform('angular')).toBe('Angular');
  });

  it('should not change a string if the first letter is already capitalized', () => {
    expect(pipe.transform('Angular')).toBe('Angular');
  });

  it('should return an empty string if the input is empty', () => {
    expect(pipe.transform('')).toBe('');
  });

  it('should return null if the input is null', () => {
    expect(pipe.transform(null)).toBeNull();
  });
});

এখানে, CapitalizePipe টেস্ট করা হয়েছে যা বিভিন্ন ইনপুট নিয়ে সঠিক আউটপুট প্রদান করছে কিনা তা যাচাই করা হয়।

উপসংহার

• ডিরেক্টিভ টেস্টিং: DOM ইন্টারঅ্যাকশন এবং স্টাইল পরিবর্তন পরীক্ষা করতে ব্যবহৃত হয়।
• পাইপ টেস্টিং: ডেটা ট্রান্সফরমেশন এবং আউটপুট যাচাই করতে ব্যবহৃত হয়।
• Angular-এ টেস্টিং করতে Jasmine এবং Karma ব্যবহৃত হয়, যা আপনাকে নিশ্চিত করতে সাহায্য করে যে আপনার ডিরেক্টিভ এবং পাইপগুলোর আচরণ সঠিকভাবে কাজ করছে।